<template>
<van-list
  v-if="!is_empty"
  class="pd-all"
  v-model="loading"
  :finished="is_finished"
  finished-text="没有更多了"
  @load="doLoad"
>
  <order-list-block
    v-for="item in list"
    :key="item.order_no"
    :data="item"
    @doReload="doReload"
  />
</van-list>
<no-data v-else />
</template>

<script>
import {
  List,
} from 'vant'
import OrderListBlock from '@views/order/components/order-list-block'
import NoData from '@cmpt/no-data'

import {
  getOrderList,
} from "@api/modules/order"

export default {
  name: 'order-list',
  components: {
    [List.name]: List,

    OrderListBlock,
    NoData,
  },
  props: {
    order_state: String,
    query_str: String,
    isActive: Boolean,
  },
  data() {
    return {
      list: [],
      total: 0,
      page: 1,
      page_size: 10,
      loading: false,
      is_finished: false,
      is_empty: false,
    }
  },

  watch: {
    isActive: function (newData, oldData) {
      if(newData)
        this.doReload()
    },
    query_str: function (newData, oldData) {
      this.doReload()
    },
  },

  methods: {

    doReload() {
      this.list = []
      this.total = 0
      this.page = 1
      this.is_finished = false
      this.is_empty = false
      this.doLoad()
    },

    async doLoad() {
      this.loading = true

      getOrderList({
        order_state: this.order_state,
        query_str: this.query_str,
        page: this.page,
        page_size: this.page_size,
      }).then(res => {
        this.loading = false

        const data = res.data
        this.total = data.total_rows
        this.list = this.list.concat(data.order_list)
        this.page++
        this.is_finished = this.list.length >= this.total
        this.is_empty = !this.total || this.total <= 0
      }).catch(err => {
        this.loading = false

        this.list = []
        this.total = 0
        this.page = 1
        this.is_finished = true
        this.is_empty = true
      })
    }
  },
}
</script>

<style lang="less" scoped>
</style>
